<%@ page  language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" %>
<form id="setFilmForm" lay-filter="setFilmForm" class="layui-form" style="display: none;padding:10px;" enctype="multipart/form-data">
    <input type="hidden" name="filmId" id="filmId" value="">
    <%--   影片图片--%>
    <div>
        <img class="layui-upload-img" id="retImg"  width="100" height="100">
        <button type="button" name="url" class="layui-btn" id="filmImg1">选择替换的影片图片</button>
        <img class="layui-upload-img" id="photo1" width="100" height="100">
        <p id="demoText"></p>
    </div>
    <%--   名称--%>
    <div class="layui-form-item">
        <label class="layui-form-label">影片名称</label>
        <div class="layui-input-block">
            <input type="text" name="filmName" id="filmName" required  lay-verify="required" placeholder="请输入影片名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--    导演--%>
    <div class="layui-form-item">
        <label class="layui-form-label">导演</label>
        <div class="layui-input-block">
            <input type="text" name="director" id="director" required  lay-verify="required" placeholder="请输入导演名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--    演员列表--%>
    <div class="layui-form-item">
        <label class="layui-form-label">演员</label>
        <div class="layui-input-block">
            <input type="text" name="stars" id="stars" required  lay-verify="required" placeholder="请输入演员信息" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--    影片时长分钟数--%>
    <div class="layui-form-item">
        <label class="layui-form-label">影片时长</label>
        <div class="layui-input-block">
            <input type="number" name="length" id="length" required  lay-verify="required" placeholder="请输入影片时长：分钟" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--    上映时间--%>
    <div class="layui-inline">
        <label class="layui-form-label">上映时间</label>
        <div class="layui-input-block">
            <input type="text" name="playTime" id="playTime1" autocomplete="off"  placeholder="年-月-日-时-分-秒" class="layui-input">
        </div>
    </div>
    <%--    影片语言多选框--%>
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">影片语言</label>
        <div class="layui-input-block">
            <c:forEach var="language" items="${requestScope.filmPageVO.languageList}">
                <input type="checkbox" name="language" lay-skin="primary" title="${language.lname}" value="${language.lcode}">
            </c:forEach>
        </div>
    </div>
    <%--    影片类型多选框--%>
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">影片类型</label>
        <div class="layui-input-block">
            <c:forEach var="type" items="${requestScope.filmPageVO.typeList}">
                <input type="checkbox" name="types" lay-skin="primary" title="${type.ftname}" value="${type.ftcode}">
            </c:forEach>
        </div>
    </div>
    <%--    国家下拉列表--%>
    <div class="layui-form-item">
        <label class="layui-form-label">国家</label>
        <div class="layui-input-block">
            <select name="country" lay-filter="country" id="country">
                <option value="">请选择国家</option>
                <c:forEach var="country" items="${requestScope.filmPageVO.countryList}">
                    <option value="${country.countryCode}">${country.countryName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <%--    影片描述--%>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">影院描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入影片描述" class="layui-textarea" name="synopsis" id="synopsis"></textarea>
        </div>
    </div>
    <%--    按钮--%>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="set" lay-filter="set" class="layui-btn btn-submit"  type="button" lay-submit="">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(['upload','form','laydate'],function (){
        var upload = layui.upload
            ,form=layui.form
            ,laydate = layui.laydate;
        //日期渲染
        laydate.render({
            elem: '#playTime1'
            ,type:'datetime'
        });
        //上传图片
        var uploadInst = upload.render({
            elem: '#filmImg1'     /*根据绑定id，打开本地图片*/
            ,url: 'img'  /*上传后台接受接口*/
            ,auto: false        /*true为选中图片直接提交，false为不提交根据bindAction属性上的id提交*/
            ,bindAction: '#set'
            ,drag:true
            ,auto: false
            ,choose:function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#photo1').attr('src', result); //图片链接（base64）
                });
            }
        });
        //提交表单的方法
        form.on('submit(set)', function (data) {
            var formData = new FormData($( "#setFilmForm" )[0]);
            $.ajax({
                cache : true,
                type : "post",
                url : "setFilm",
                async : false,
                data : formData,
                contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                error : function(request) {
                    layer.alert('操作失败', {
                        icon: 2,
                        title:"提示"
                    });
                },
                success : function(ret) {
                    if (ret.code==1) {
                        layer.closeAll();
                        layer.alert('修改成功', {
                            icon: 1,
                            title:"提示"
                        });
                    } else {
                        layer.alert(ret.msg,{
                            icon: 2,
                            title:"提示"
                        });
                    }
                }
            })
        });
    });
</script>